<template>
    <div class="register">
        <div class="left-side">
            <div class="register-content">
                <p class="left-side-tittle">{{ t('register.emailVerification') }}</p>
                <ElForm
                    ref="formRef"
                    :model="numberValidateForm"
                    class="register-ruleForm"
                    label-position="top"
                    :inline="true"
                    :rules="rules"
                >
                    <ElFormItem :label="t('register.email')" prop="email">
                        <ElInput
                            v-model="numberValidateForm.email"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                        <ElButton type="primary" @click="getCode(formRef)">{{ codeName }}</ElButton>
                    </ElFormItem>
                </ElForm>
            </div>
        </div>
        <div class="right-side fr"></div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue';
import type { ElForm } from 'element-plus';
import { useRouter } from 'vue-router';
import { identifyCode, getEmailDto } from '@/api/api.query';
import { debounce, setCookie, deleteCookie } from '@/utils/utils';
import { t, onLocaleChanged } from '@/i18n';

type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const totalTime = ref(60);
const timer = ref(0);
const router = useRouter();

const numberValidateForm = reactive({
    email: '',
    code: '',
});
const codeName = computed(() => t('register.sendVerification'));
const rules = ref(getRules());
function getRules() {
    return {
        email: [
            {
                required: true,
                message: t('register.emailPlaceholder'),
                trigger: 'blur',
            },
            {
                type: 'email',
                message: t('register.emailIncorrectTip'),
                trigger: ['blur', 'change'],
            },
        ],
    };
}
onLocaleChanged(() => {
    rules.value = getRules();
});

const getCode = (formEl: FormInstance | undefined) => {
    const id = ref('');
    const code = ref('');
    if (!formEl) return;
    debounce(() => {
        formEl.validate((valid) => {
            setCookie('SaaS_Token', '111');
            if (valid) {
                identifyCode({
                    method: 'POST',
                    data: {
                        email: numberValidateForm.email,
                    },
                }).then((res) => {
                  deleteCookie('SaaS_Token');
                      code.value = res.result.split('?')[1].split('&')[0].split('=')[1];
                      id.value = res.result.split('?')[1].split('&')[1].split('=')[1];
                      router.push({ path: '/register', query: { id: id.value, code: code.value } });
                      deleteCookie('SaaS_Token');
                });
            }
        });
    }, 100);
};
</script>

<style scoped>
.left-side {
    width: 66vw;
    margin-bottom: 100px;
    display: flex;
    justify-content: center;
}
.right-side {
    width: 34vw;
    height: 100vh;
    background: url('../../assets/image/register_banner.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.register {
    display: flex;
    align-items: center;
}

.register-ruleForm {
    display: flex;
    flex-direction: column;
}
.register-content {
    width: 800px;
}
.register-input {
    width: 326px;
    height: 42px;
    border-radius: 5px;
    margin-right: 10px;
}
.business-code {
    width: 592px;
}
.register-introduce {
    width: 592px;
    border-radius: 5px;
}
.left-side-tittle {
    font-size: 26px;
    color: #333;
    font-weight: 600;
    margin-bottom: 35px;
}
.registerBtn {
    width: 378px;
    margin-top: 8px;
    font-size: 14px;
    background-color: #3ab0a2;
    border-radius: 4px;
    color: #fff;
}
.register-back {
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 18px;
    letter-spacing: 0px;
    color: #333333;
}
.register-back-btn {
    color: #3ab0a2;
}
.el-button--primary {
    color: var(--el-button-text-color, var(--el-text-color-regular));
}
::v-deep .el-form-item {
    margin-bottom: 20px;
}
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0px;
}
::v-deep .el-form-item__label {
    line-height: 20px;
}
</style>
